<template>
  <div class="role-panel">
    <div class="role-panel-header">
      <h3>角色权限</h3>
      <button class="add-btn" @click="openAdd">新增角色</button>
    </div>
    <table class="role-table">
      <thead>
        <tr>
          <th>角色名</th>
          <th>描述</th>
          <th>权限</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="role in roles" :key="role.id">
          <td>{{ role.name }}</td>
          <td>{{ role.desc }}</td>
          <td>
            <span v-for="p in role.permissions" :key="p" class="perm-tag">{{ getPermName(p) }}</span>
          </td>
          <td>
            <button class="edit-btn" @click="openEdit(role)">编辑</button>
            <button class="delete-btn" @click="remove(role.id)">删除</button>
          </td>
        </tr>
        <tr v-if="!roles.length">
          <td colspan="4" style="text-align:center;color:#aaa;">暂无角色</td>
        </tr>
      </tbody>
    </table>
    <!-- 弹窗表单 -->
    <div v-if="showDialog" class="dialog-mask">
      <div class="dialog-box">
        <h4>{{ editId ? '编辑角色' : '新增角色' }}</h4>
        <form @submit.prevent="save">
          <div class="form-row">
            <label>角色名：</label>
            <input v-model="form.name" required />
          </div>
          <div class="form-row">
            <label>描述：</label>
            <input v-model="form.desc" />
          </div>
          <div class="form-row">
            <label>权限：</label>
            <div class="perm-list">
              <label v-for="p in allPerms" :key="p.key" class="perm-checkbox">
                <input type="checkbox" :value="p.key" v-model="form.permissions" />
                {{ p.name }}
              </label>
            </div>
          </div>
          <div class="dialog-actions">
            <button type="submit" class="save-btn">保存</button>
            <button type="button" class="cancel-btn" @click="closeDialog">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const allPerms = [
  { key: 'user', name: '用户管理' },
  { key: 'role', name: '角色权限' },
  { key: 'stats', name: '数据统计' },
  { key: 'notify', name: '消息通知' },
  { key: 'settings', name: '系统设置' },
  { key: 'content', name: '内容管理' },
  { key: 'file', name: '文件管理' },
  { key: 'log', name: '日志审计' },
  { key: 'profile', name: '个人中心' },
  { key: 'help', name: '帮助中心' },
];
const roles = ref([
  { id: 1, name: '管理员', desc: '拥有全部权限', permissions: allPerms.map(p=>p.key) },
  { id: 2, name: '内容编辑', desc: '可管理内容', permissions: ['content', 'file', 'notify'] },
]);
const showDialog = ref(false);
const editId = ref(null);
const form = ref({ name: '', desc: '', permissions: [] });
function openAdd() {
  editId.value = null;
  form.value = { name: '', desc: '', permissions: [] };
  showDialog.value = true;
}
function openEdit(role) {
  editId.value = role.id;
  form.value = { name: role.name, desc: role.desc, permissions: [...role.permissions] };
  showDialog.value = true;
}
function closeDialog() {
  showDialog.value = false;
}
function save() {
  if (editId.value) {
    // 编辑
    const idx = roles.value.findIndex(i => i.id === editId.value);
    if (idx > -1) {
      roles.value[idx].name = form.value.name;
      roles.value[idx].desc = form.value.desc;
      roles.value[idx].permissions = [...form.value.permissions];
    }
  } else {
    // 新增
    roles.value.push({
      id: Date.now(),
      name: form.value.name,
      desc: form.value.desc,
      permissions: [...form.value.permissions]
    });
  }
  showDialog.value = false;
}
function remove(id) {
  roles.value = roles.value.filter(i => i.id !== id);
}
function getPermName(key) {
  const p = allPerms.find(p => p.key === key);
  return p ? p.name : key;
}
</script>

<style scoped>
.role-panel {
  width: 100%;
}
.role-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.add-btn {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s;
}
.add-btn:hover {
  background: #1256a3;
}
.role-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.role-table th, .role-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}
.role-table th {
  background: #f4f6fa;
  color: #555;
}
.perm-tag {
  display: inline-block;
  background: #e3f0ff;
  color: #1976d2;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
  margin-right: 6px;
  margin-bottom: 2px;
}
.edit-btn, .delete-btn {
  background: none;
  border: none;
  color: #1976d2;
  cursor: pointer;
  margin-right: 8px;
  font-size: 14px;
}
.delete-btn {
  color: #f44336;
}
.edit-btn:hover {
  text-decoration: underline;
}
.delete-btn:hover {
  text-decoration: underline;
}
.dialog-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.dialog-box {
  background: #fff;
  border-radius: 8px;
  padding: 28px 32px 18px 32px;
  min-width: 320px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
.form-row {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.form-row label {
  width: 60px;
  color: #555;
}
.form-row input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
}
.perm-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-left: 8px;
}
.perm-checkbox {
  font-size: 14px;
  color: #1976d2;
  user-select: none;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.save-btn {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 15px;
}
.cancel-btn {
  background: #eee;
  color: #333;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 15px;
}
.save-btn:hover {
  background: #1256a3;
}
.cancel-btn:hover {
  background: #ccc;
}
</style>
